<template>
	<div class="userList">
		<div>
			<div style="width: 100%">
				<el-row :gutter="20" type="flex">
					<el-col :span="6">
						<el-input size="medium" placeholder="请输入用户名" v-model="userQuery.userName" clearable></el-input>
					</el-col>
					<el-col :span="6">
						<el-input size="medium" placeholder="请输入账号" v-model="userQuery.account" clearable></el-input>
					</el-col>
					<el-col :span="6">
						<sw-search-tree-select
							clearable
							v-model="userQuery.deptId"
							:tree-data="departTree"
							:default-props="defaultProps"
							placeholder="请选择单位"
							size="medium"
							style="width: 100%"
						></sw-search-tree-select>
					</el-col>
					<el-col :span="6">
						<el-select size="medium" style="width: 100%" v-model="userQuery.roleIds" clearable placeholder="请选择角色">
							<el-option v-for="(v, i) in roleListData" :key="i" :label="v.name" :value="v.id"></el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<el-button size="medium" type="custom" @click="getUser()" plain>搜索</el-button>
					</el-col>
				</el-row>
			</div>
		</div>
		<el-table ref="multipleTable" :data="userList" size="small" tooltip-effect="dark" style="width: 100%" row-key="id" @select="select" @select-all="selectAll">
			<el-table-column type="selection" width="55" :reserve-selection="true" :selectable="selectInit"></el-table-column>
			<el-table-column fixed prop="userName" label="用户">
				<template slot-scope="scope">{{ scope.row | showUserInfo }}</template>
			</el-table-column>
			<el-table-column prop="deptFullName" label="部门">
				<template slot-scope="scope">{{ scope.row.deptFullName | deptFormat }}</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
		</el-table>
		<Pagination
			style="margin-top: 20px"
			v-show="parseInt(pageObj.count) > 0"
			:total="parseInt(pageObj.count)"
			@change="getUser"
			:page.sync="userQuery.page"
			:limit.sync="userQuery.limit"
		/>
	</div>
</template>
<script>
import Bus from '@/utils/bus.js';
import { tbRoleQuery } from '@/api/admin/system/role.js';
import { tbDeptQuery } from '@/api/admin/system/unitManage.js';
import { tbSysUserQuery } from '@/api/admin/user/user-manage.js';
import swSearchTreeSelect from '@/components/swSearchTreeSelect';
export default {
	components: { swSearchTreeSelect },
	data() {
		return {
			multipleSelection: [],
			userQuery: {
				page: 1,
				limit: 10,
				userName: '',
				account: '',
				filterAccountId: '',
				del: 1
			},
			pageObj: {},
			userList: [],
			echoUserData: [],
			roleListData: [],
			departTree: [],
			defaultProps: {
				label: 'name',
				children: 'childList'
			}
		};
	},
	props: ['userId', 'filterCurrentAccount'],
	async mounted() {
		// if (this.userId.length) {
		//   if (typeof this.userId[0] == "string") {
		//     this.multipleSelection = JSON.parse(JSON.stringify(this.userId));
		//     this.echoUserData = JSON.parse(JSON.stringify(this.userId));
		//   } else {
		//     let arr = this.userId.map((v) => v.id);
		//     this.multipleSelection = arr;
		//     this.echoUserData = arr;
		//   }
		// }
		this.multipleSelection = JSON.parse(JSON.stringify(this.userId));
		this.echoUserData = JSON.parse(JSON.stringify(this.userId));
		await this.getRoleListData();
		await this.getDeptListData();
		this.getUser();
	},
	watch: {
		multipleSelection(arr) {
			let data = {
				userId: arr.filter((v) => !this.userId.includes(v.id))
			};

			Bus.$emit('setGrantUser', data);
		}
	},
	methods: {
		async getRoleListData() {
			let params = { page: 1, limit: 9999 };
			let result = await tbRoleQuery(params).then((res) => res.data);
			if (result.code == '0') {
				this.roleListData = result.data || [];
			}
		},

		async getDeptListData() {
			let params = { pid: 0 };
			let result = await tbDeptQuery(params).then((res) => res.data);
			if (result.code == '0') {
				this.departTree = result.data || [];
			}
			console.log(result);
		},

		selectInit(row) {
			return !this.userId.includes(row.id);
		},
		//获取人员
		getUser() {
			this.userQuery.filterAccountId = this.filterCurrentAccount ? this.$store.getters.userId : '';
			tbSysUserQuery(this.userQuery).then((res) => {
				if (res.data.code == 0) {
					this.pageObj = res.data;
					this.userList = res.data.data;
					// if (this.echoUserData.length > 0) {
					//   this.multipleSelection = this.echoUserData;
					// }

					this.handleSelected();
				}
			});
		},
		//返回选中数据
		// handleSelectionChange(val) {
		//   this.multipleSelection = val;
		// },
		// 判断操作的id选中状态
		select(selection, row) {
			this.multipleSelection = selection;
		},
		selectAll(selection) {
			this.multipleSelection = selection;
		},
		//数据回显
		handleSelected() {
			// let checkedArr = this.myFilter(this.userList, this.multipleSelection);
			let idArr = this.multipleSelection.map((v) => v.id);
			let checkedArr = this.myFilter(this.userList, idArr);
			if (checkedArr.length) {
				this.$nextTick(() => {
					checkedArr.forEach((row) => {
						this.$refs.multipleTable.toggleRowSelection(row, true);
					});
				});
			}
		},
		//过滤数组相同元素
		myFilter(arr1, arr2) {
			return arr1.filter((ele) => arr2.filter((x) => x === ele.id).length > 0);
		},
		myDiffFilter(arr1, arr2) {
			return arr1.filter((ele) => arr2.filter((x) => x.id != ele.id).length > 0);
		}
	}
};
</script>
